<template>
  <div class="container" v-if="detailAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.Program_details')" :has-return="true">
      <el-button type="primary" @click="editProgram" v-if="editAuth">
        {{ $t('m.Edit_Program_List') }}
      </el-button>
    </page-header>
    <!-- 节目单信息 -->
    <div class="table_top">
      <div class="table_box_title1">{{ $t('m.Program_information') }}</div>
      <div class="table_box_title2">
        {{ $t('m.program_title') }}: {{ detailLists.title }}
      </div>
      <div class="table_box_title3">
        {{ $t('m.Delivery_date') }}: {{ detailLists.deliveryTime | dateformat }}
      </div>
    </div>
    <!-- 选择广告 -->
    <div class="table_center webkit_scrollbars webkit_scrollbar_track">
      <div class="table_center_top">
        <div class="table_box_title1">{{ $t('m.Advertisement') }}</div>
        <div class="table_box_title3" style="margin-bottom:8px;">
          <span
            >{{ $t('m.invite_Type') }}:
            {{ detailLists.fileType | valFormat(options1) }}</span
          ><span v-show="detailLists.fileType == 1"
            >{{ $t('m.Image_playback_interval') }}:
            {{ detailLists.playTime }}s</span
          >
        </div>
        <div class="table_box_title3">
          <span>{{
            $t('m.Select_advertisement_number').replace(
              'XX',
              detailLists.advertList.length
            )
          }}</span>
          <span
            >{{ $t('m.Available_storage') }}:
            {{ $format.formatBytes(detailLists.storage.remainCount) }}</span
          ><span
            >{{ $t('m.Used_storage') }}:
            {{ $format.formatBytes(detailLists.storage.usedCount) }}</span
          >
        </div>
      </div>
      <el-divider class="el_divider"></el-divider>
      <div
        class="table_center_img"
        :class="{ active2: detailLists.advertList.length > 12 }"
      >
        <div
          class="table_center_img_div"
          v-for="item in detailLists.advertList"
          :key="item.id"
        >
          <div
            class="table_center_img_div_img"
            :style="item.state == 2 ? 'border:1px solid #ff605a;' : ''"
          >
            <el-image
              v-if="detailLists.fileType == 1"
              :src="fileUrlFormat(item.url)"
              :preview-src-list="[fileUrlFormat(item.url)]"
              alt=""
              class="img_across"
              fit="cover"
            />
            <video
              v-else
              :src="fileUrlFormat(item.url)"
              class="img_across"
            ></video>
            <img
              src="@/assets/imgs/ic_play@2x.png"
              alt=""
              class="video_img"
              v-show="detailLists.fileType == 2"
              @click.stop="playVideo(item.url)"
            />
            <div
              src="@/assets/imgs/ic_del@2x (1).png"
              alt=""
              class="span_tip"
              v-show="item.state == 2"
            >
              {{ $t('m.Program_off') }}
            </div>
          </div>
          <div>
            <el-tooltip :content="item.title" placement="top-start"
              ><div class="table_center_img_div_text2">
                {{ item.title }}
              </div></el-tooltip
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 选择机柜 -->
    <div class="table-box el_table_div">
      <div class="table_box_title1" style="margin-top:10px;">
        {{ $t('m.Stations') }}
      </div>
      <div class="table_box_title3" style="margin-bottom: 20px;">
        {{
          $t('m.Select_Station_number').replace(
            'XX',
            detailLists.cabinetList.length
          )
        }}
      </div>
      <!--表格-->
      <el-table
        :data="
          detailLists.cabinetList
            ? detailLists.cabinetList.slice(
                (stationParams.pageNum - 1) * stationParams.pageSize,
                stationParams.pageNum * stationParams.pageSize
              )
            : detailLists.cabinetList
        "
      >
        <emptydata slot="empty" v-if="detailLists.cabinetList.length == 0" />
        <el-table-column
          :label="$t('m.Station_SN')"
          prop="cabinetNo"
          fixed
          min-width="104"
        />
        <el-table-column
          :label="'IMEI'"
          prop="imei"
          show-overflow-tooltip
          min-width="173"
        >
        </el-table-column>
        <el-table-column
          :label="$t('m.Screen_direction')"
          show-overflow-tooltip
          min-width="127"
        >
          <template #default="scope">
            <div
              style="display: flex;align-items: center;justify-content: center;"
            >
              <span class="table_box_across" v-if="scope.row.style == 0"></span>
              <span class="table_box_vertical" v-else></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.Station_List_placeholder_Device_info')"
          prop="deviceCount"
          show-overflow-tooltip
          min-width="104"
        >
        </el-table-column>
        <el-table-column
          :label="$t('m.Shop_Details_Franchisee')"
          prop="agentName"
          min-width="130"
        >
          <template #default="scope">
            {{ scope.row.agentName | strFormat }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.Shop_name')"
          prop="branchName"
          min-width="127"
        >
          <template #default="scope">
            {{ scope.row.branchName | strFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('m.status')" min-width="127">
          <template #default="scope">
            {{ scope.row.state | valFormat(options3) | strFormat }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('m.Delivery_status')" min-width="122">
          <template #default="scope">
            <span
              :style="
                scope.row.deliveryState == 1
                  ? 'color:#4ce48a;'
                  : scope.row.deliveryState == 0
                  ? 'color:#ffc855;'
                  : 'color:#ff605a;'
              "
            >
              {{ scope.row.deliveryState | valFormat(options2) }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="fenye" v-if="detailLists.cabinetList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="stationParams.pageNum"
          :page-size="stationParams.pageSize"
          :total="detailLists.cabinetList.length"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 查看视频 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="playDialog"
      :title="$t('m.play_video')"
      width="640px"
      append-to-body
      @close="closePlay"
    >
      <div class="el_dialog_center">
        <video
          :src="fileUrlFormat(urlVideo)"
          controls="controls"
          autoplay="autoplay"
          class="play_video"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import share from '../../mixins/share'
// import PageHeader from '../../common/module/page-header.vue'
// import pagination from '@/components/pagination.vue'

export default {
  // components: { pagination },
  // mixins: [share],
  data () {
    return {
      lang: this.$t('m'),
      options1: [
        { value: 1, label: this.$t('m.program_img') },
        { value: 2, label: this.$t('m.program_Video') }
      ],
      options2: [
        { value: 0, label: this.$t('m.Pending_deliver') },
        { value: 1, label: this.$t('m.Program_delivered') },
        { value: 2, label: this.$t('m.Program_Failed') }
      ], // 下发状态：0-待下发 1-下发成功 2-下发失败
      options3: [
        {
          value: 0,
          label: this.$t('m.Station_Status_Off')
        },
        {
          value: 1,
          label: this.$t('m.Station_Status_On')
        },
        {
          value: 3,
          label: this.$t('m.agency_activated')
        }
      ],
      stationParams: {
        pageNum: 1,
        pageSize: 10
      },
      detailLists: {
        advertList: [],
        cabinetList: [],
        storage: {
          remainCount: 0,
          usedCount: 0
        }
      },
      urlVideo: '',
      playDialog: false,
      detailAuth: this.permissionsId(204),
      editAuth: this.permissionsId(84),
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.getDetail(this.$route.query.id)
  },
  methods: {
    //获取节目单详情
    getDetail (e) {
      this.$api.ad.getProgramsDetail(e).then(res => {
        if (res.code == 0) {
          this.detailLists = res.data
        }
      })
    },

    //切换机柜
    handleCurrentChange (val) {
      this.stationParams.pageNum = val
    },

    //编辑节目单
    editProgram () {
      this.$router.push({
        path: '/ads/player-create',
        query: { id: this.detailLists.id }
      })
    },

    //节目单-播放视频
    playVideo (item) {
      this.urlVideo = item
      this.playDialog = true
    },

    //节目单-关闭视频
    closePlay () {
      this.playDialog = false
      this.urlVideo = ''
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  padding: 0 0 20px 0;
}

.page-header {
  width: 1064px !important;
  min-width: initial !important;
  padding: 20px 0 !important;
}
.table-box {
  width: 1064px !important;
  min-width: initial !important;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px !important;
}

.table_top {
  width: 1064px;
  background: #ffffff;
  border-radius: 10px;
  padding: 24px;
}

.table_center {
  width: 1064px;
  background: #ffffff;
  // padding-bottom: 4px;
  border-radius: 10px;
  margin: 20px 0;
  .table_center_top {
    padding: 24px 24px 20px;
  }
}

.webkit_scrollbar_track {
  ::-webkit-scrollbar-track {
    border-radius: 0 0 10px 0;
  }
}

.table_box_title1 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: #39404d;
  line-height: 22px;
}

.table_box_title2 {
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #646b80;
  line-height: 16px;
  margin: 20px 0 12px 0;
}

.table_box_title3 {
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  color: #646b80;
  line-height: 16px;
  display: flex;
  align-items: center;
  span {
    display: block;
    margin-right: 20px;
  }
}

.active2 {
  overflow: hidden;
  overflow-y: scroll; //纵行超过隐藏
}

.table_center_img {
  max-height: 308px;
  padding: 0 0 20px 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  // overflow: hidden;
  // overflow-y: scroll; //纵行超过隐藏
  border-radius: 10px;
  .table_center_img_div {
    margin: 20px 20px 24px 0;
    width: 150px;
    height: 100px;
    .table_center_img_div_img {
      width: 150px;
      height: 100px;
      background: #f5f5f7;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .img_across {
        max-width: 80px;
        height: 50px;
        border-radius: 2px;
      }
      .img_vertical {
        width: 50px;
        height: 80px;
        border-radius: 2px;
      }
      .video_img {
        position: absolute;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 99;
      }
      .span_tip {
        position: absolute;
        height: 20px;
        // cursor: pointer;
        font-size: 12px;
        text-align: right;
        color: #ff605a;
        z-index: 5;
        right: 5px;
        top: 3px;
      }
    }
    .table_center_img_div_text2 {
      width: calc(100% - 32px);
      font-size: 12px !important;
      font-weight: 500;
      text-align: center;
      color: #39404d;
      // height: 14px !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 1; /* 显示的行数 */
      margin-top: 8px;
      margin-left: 16px;
      // padding: 0 16px;
      ::v-deep .el-tooltip {
        font-size: 12px !important;
        font-weight: 500;
        text-align: center;
        color: #39404d;
      }
    }
  }
}

.table_box_across {
  display: block;
  width: 30px;
  height: 20px;
  background: #d2d8e2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.table_box_vertical {
  display: block;
  width: 20px;
  height: 30px;
  background: #d2d8e2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.fenye {
  width: 100%;
  text-align: right;
  padding: 18px 6px 0 0;
  ::v-deep .el-pagination {
    padding-right: 0 !important;
  }
  ::v-deep .btn-next {
    margin-right: 0 !important;
  }
}

@media screen and (min-width: 1332px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
